<template>
    <div class="main">
        <h2>选择出行方案</h2>
        <div>
            <span>
                <van-icon name="location-o" />
                出发地选择
            </span>
            <div style="display: flex; justify-content: space-between;">
                <div style="display: inline;">
                    <div class="chufaxuanze">西安（临近）</div>
                </div>
                <div style=" display: inline;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) ">更多</div>
            </div>
        </div>
        <div>
            <span>
                <van-icon name="location-o" />
                选择套餐
            </span>
            <div style="display: flex; justify-content: space-between; overflow: auto;">
                <div style=" display: flex; justify-content: space-between;">
                    <div style="display: inline;">
                        <div class="taocanxuanze">A套餐<span>￥1298起</span><br>
                            <span>西安逸赏酒店</span>
                        </div>
                    </div>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <div style="display: inline;">
                        <div class="taocanxuanze">B套餐<span>￥1298起</span><br>
                            <span>西安逸赏酒店</span>
                        </div>
                    </div>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <div style="display: inline;">
                        <div class="taocanxuanze">C套餐<span>￥1298起</span><br>
                            <span>西安逸赏酒店</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <span>
                <van-icon name="location-o" />
                交通方式
            </span>
            <div style="display: flex;">
                <img src="https://s.qunarzz.com/vacation_react/detail/traffic/local_active.png" alt="" width="40px"
                    style="margin-right: 10px;">
                <div style="display: inline; margin-top: 10px;">
                    <div class="chufaxuanze">西安（临近）</div>
                </div>

            </div>
        </div>
        <div class="m-point m-multi">
            <div class="contain">
                <!-- react-text: 283 -->A套餐<!-- /react-text --><!-- react-text: 284 -->特色<!-- /react-text --><!-- react-text: 285 --><!-- /react-text -->
            </div>
            <ul class="cont"><!-- react-text: 287 --><!-- /react-text -->
                <li class="item">
                    <img class="img" src="//s.qunarzz.com/vacation_react/detail/d_sellingPoint_1.png">
                    <span class="label">精选酒店</span><span class="content">西安城墙宜尚酒店4晚连住，出门即是古城墙</span>
                </li>
                <li class="item">
                    <img class="img" src="//s.qunarzz.com/vacation_react/detail/d_sellingPoint_2.png">
                    <span class="label">网红玩法</span><span class="content">大唐不夜城+有讲解的陕西历史博物馆</span>
                </li>
                <li class="item">
                    <img class="img" src="//s.qunarzz.com/vacation_react/detail/d_sellingPoint_3.png">
                    <span class="label">超值赠送</span><span class="content">联系客服可赠送西安游玩详细攻略一份</span>
                </li>
                <li class="item">
                    <img class="img" src="//s.qunarzz.com/vacation_react/detail/d_sellingPoint_4.png">
                    <span class="label">管家服务</span><span class="content">全程定制师服务，含24h接送机+双保险</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.main {
    padding: 0 10px 0 10px;
    background-image: url('https://s.qunarzz.com/vacation_react/detail/traffic/traffic_bg.png');

    .chufaxuanze {
        border: 1px solid #6244d0;
        border-radius: 20px 20px 20px 20px;
        text-align: center;
        line-height: 30px;
        width: 90px;
        height: 30px;
        margin-right: 10px;
    }

    .taocanxuanze {
        border: 1px solid #6244d0;
        border-radius: 20px 20px 20px 20px;
        text-align: center;


        width: 140px;
        height: 30px;
        margin-right: 10px;
    }

    ul {
        margin-top: 10px;
        padding: 0 10px 0 10px;

        li {
            margin-bottom: 10px;

            img {
                width: 25px;
            }
        }
    }

}
</style>